/**
 作者:轨迹
 日期:2015-9-25
 功能:焦点图
 */
sky.define(['sky/dom/dom' ,'sky/dom/anim'],function(require, exports, module, $, anim){
    var U = require('util');
    var E = require('emitter');

    //U.loadCSS(module.dir + 'css/focus.css');
    var bar = 'sky-focus';
    var anim_key = U.isTouch?'translateX$':'left$';
    var cssFn = U.isTouch?function(dom,v){
        //console.log('cssFn',v);
        $.translate(dom,v);
    }:function(dom,v){$.css(dom,'left',v + 'px')};

    var html = '<div class="c-rel"><div ' + bar + '="cImg" class="view-imgs" style="transform: translateX(0) translateY(0);">{#imgs}</div><div ' + bar + '="cDot" class="view-dots">{#dots}</div></div>';

    function setAuto(){
        if(this.isAuto){
            var i = this;
            clearTimeout(i.timeout);
            i.timeout = setTimeout(function(){
                if(!i.dragData){
                    i.next();
                }
            },5000);
        }
    }

    function play(flag){
        setAuto.call(this);
        if(this.animFlag || this.dragData){
            return ;
        }
        var i = this;
        i.animFlag = true;
        var opt = {};
        opt.callback = function(){
            i.animFlag = null;
            i.setActive(i.targetNum + (!flag?-1:1));
        }
        var w = i.$cImg.offsetWidth;
        if(flag){
            w *= -1;
        }
        opt[anim_key] = w;
        //console.log(i.$cImg, opt);
        anim.play(i.$cImg,opt);
    }

    //鼠标移动开始
    function dragDown(){
        var i = this;
        var ev = $.getEvent();
        if(!U.isTouch){
            ev.preventDefault()
            i.scrollFlag = -1;
        }
        if(i.animFlag){
            return ;
        }
        if(i.dragData){
            i.setActive(i.targetNum);
        }
        i.scrollFlag = 0;
        i.dragData = {
            cur:ev.clientX,
            move: U.bind(dragMove, i),
            up: U.bind(dragUp, i)
        };
        $.appendEvent(document,"vmove",i.dragData.move,true);
        $.appendEvent(document,"vup",i.dragData.up,true);
    }

    //鼠标移动中
    function dragMove(){
        var i = this;
        if(i.animFlag){
            return ;
        }
        if(i.scrollFlag == 1){
            return ;
        }
        if(i.dragData){
            var ev = $.getEvent();
            var len = ev.clientX - i.dragData.cur;
            if(len == 0){
                return ;
            }
            if(i.scrollFlag == 0){
                i.scrollFlag = Math.abs(len) > 0?-1:1;
            }
            if(i.scrollFlag == -1){
                ev.preventDefault();
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                var w = i.$cImg.offsetWidth;
                cssFn(i.$cImg,Math.min(w, Math.max(w*-1,len)));
                //$.translate(i.$cImg,Math.round(len / i.$cImg.offsetWidth * 10000) / 100 + '%');
            }
        }
    }

    //鼠标抬起
    function dragUp(){
        var i = this;
        if(i.animFlag){
            return ;
        }
        if(i.dragData){
            var ev = $.getEvent();
            $.removeEvent(document, "vup", i.dragData.up,true);
            $.removeEvent(document, "vmove", i.dragData.move,true);
            if(i.scrollFlag == -1){
                var len = i.dragData.cur - ev.clientX;
                i.dragData = null;
                if(len == 0){
                    setAuto.call(i);
                    return ;
                }
                var xlen = Math.abs(len);
                if(xlen < 20){
                    setAuto.call(i);
                    var opt = {};
                    opt[anim_key] = 0;
                    anim.play(i.$cImg,opt);
                }
                else{
                    play.call(i,len > 0);
                }
            }
        }
    }

    var Focus = exports.BaseClass = U.extend(E , {
        init: function(imgUrls, cot){
            this.imgs = imgUrls;
            var wCot = this.wCot = $(cot);
            $.addClass(wCot, 'sky-focus');
            // 插入html节点
            var imgs = [];
            var dots = [];
            U.forEach(imgUrls, function(src){
                imgs.push('<img ' + bar + '="img" src="' + src.replace(/\"/g, "&#34;").replace(/\'/g, "&#39;") + '" />');
                dots.push('<span ' + bar + '="dot"></span>');
            });
            if(imgs.length == 2){
                imgs.push(imgs[0]);
                imgs.push(imgs[1]);
            }

            $.html(wCot, html.replace(/\{#imgs\}/g, imgs.join('')).replace(/\{#dots\}/g, dots.join('')));
            this.$cImg = $.get('div[' + bar + '=cImg]',wCot)[0];
            // this.$cDot = $.get('div[' + bar + '=cDot]',wCot)[0];
            this.$imgs = $.get('img[' + bar + '=img]',wCot);
            this.$dots = $.get('span[' + bar + '=dot]',wCot);

            this.setActive(0);
            $.appendEvent(this.$cImg,"vdown",U.bind(dragDown,this),true);
            setAuto.call(this);
            return this;
        },
        setActive : function (num){
            cssFn(this.$cImg,0);
            var index = this.targetNum || 0;
            var dots = this.$dots;
            var len = dots.length;

            var target = num % len;
            if(target < 0){
                target += len;
            }
            dots[index].className = '';
            var imgs = this.$imgs;
            var lenx = imgs.length;
            imgs[index].className = '';
            imgs[(index + lenx - 1) % lenx].className = '';
            imgs[(index + 1) % lenx].className = '';

            this.targetNum = target;
            dots[target].className = 'active';
            imgs[target].className = 'active';
            imgs[(target - 1 + lenx) % lenx].className = 'prev';
            imgs[(target + 1) % lenx].className = 'next';

            this.emit('view', imgs[target]);
        },
        // 设置自动播放
        setAuto : function(){
            this.isAuto = true;
            setAuto.call(this);
        },
        next : function(){
            play.call(this, true);
        },
        prev : function(){
            play.call(this, false);
        }
    }, function(){
        this.targetNum = 0;
    });

    exports.create = function(){
        var foc = new Focus();
        if(arguments.length > 0){
            foc.init.apply(foc, arguments);
        }
        return foc;
    };
});
